<template>
  <div v-if="isVisible" class="modal-overlay">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-header-left">
          <img src="../../../assets/images/home-page/eq-right.png" alt="" />
          <span>实时视频</span>
        </div>
        <img @click="closeModal" src="../../../assets/images/home-page/close-bt.png" alt="" />
      </div>
      <div class="m-c-box">
        <div class="e-box">
          <div class="eq-left-top">
            <!-- <div class="eq-left-top-title">
              <img src="../../../assets/images/home-page/eq-right.png" alt="" />
              设备搜索
            </div> -->
            <div class="eq-left-top-content">
              <!-- <div class="eq-left-top-c-seach">
                <input type="text" v-model="searchQuery" placeholder="搜索" />
              </div> -->
              <div class="eq-left-top-c-tree">
                <el-tree :data="filteredData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
              </div>
            </div>
          </div>
          <div class="video-box">
            <!-- <NstdVideoInspect
              :treeType="treeType"
              :currentDeviceInfo="currentDeviceInfo"
              @setCheckedIndex="setCheckedIndex"
              @getVideoList="getVideoList"
            ></NstdVideoInspect> -->
            <video
              id="video"
              width="100%"
              height="100%"
              controls
              preload="auto"
              controlslist="nodownload noplaybackrate"
              :disablePictureInPicture="true"
              ref="videoElement"
            >
              <source id="video_source" :src="videoSrc" type="video/mp4" />
              <source id="ogg_source" :src="videoSrc" type="video/ogg" />
            </video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import DeviceSearch from '@/views/home/components/DeviceSearch.vue';
import NstdVideoInspect from '@/views/home/components/video/NstdVideoInspect.vue';
import { getVedioTree, realTimeStream } from '@/api/auth/ledger.js';
import { videoRealTimeDisplayInfo } from '@/api/inspect.js';
import axios from 'axios';
import CsncUtils from 'csnc-utility-js';
const props = defineProps(['isVisible']);
const treeList = ref([]);
const emit = defineEmits();
const videoList = ref([]);
const checkedIndex = ref(0);
const defaultProps = {
  children: 'children',
  label: 'deviceName',
  value: 'id'
};
const treeType = ref(1);
const currentDeviceInfo = ref({});
const patrolDeviceCodes = ref(null);
const videoObj = ref(null);
const videoRealTimeDisplayInfoData = ref(null);
// 搜索框的值
const searchQuery = ref('');
const filteredData = [{
  id:'1',
  deviceName:'110kV变电站',
  type:'',
  children:[{
    id:'2',
    deviceName:'监控设备',
    type:'',
    children:[{
      id:'150710000003040214',
      deviceName:'电抗室2-#6球',
      type:'video'
    },{
      id:'150710000003040212',
      deviceName:'北3-#4球',
      type:'video'
    },{
      id:'150710000003040215',
      deviceName:'北2-#4球',
      type:'video'
    },{
      id:'150710000003040442',
      deviceName:'中2-#24球',
      type:'video'
    },{
      id:'150710000003040445',
      deviceName:'电容器-#27球',
      type:'video'
    }]
  }]
 
}]
// const filteredData = computed(() => {
//   return treeList.value.filter((item) => item.deviceName.toLowerCase().includes(searchQuery.value.toLowerCase()));
// });
onMounted(() => {
  getTreeList();
});
const videoElement = ref(null);
const videoSrc = ref('');

const loadAndPlayVideo = (src) => {
  if (videoElement.value) {
    videoElement.value.load();
    videoElement.value.play();
  }
};

const setVideo = (intersects) => {
  const host = window.location.host.includes('localhost') ? '/dev-api' : '/stage-api';
  axios
    .post(`${host}/storehouse/videoPlatform/uvp-micro-service/mediatranscode/api/v1/play`, {
      code: intersects[0].object.name.split('<>')[3],
      redirect: false
    })
    .then((res) => {
      if (res.data.location) {
        videoSrc.value = res.data.location;
        loadAndPlayVideo(videoSrc.value);
      }
      console.log('res.location-------------', res.data.location);
    })
    .catch((error) => {
      console.error('Error fetching video:', error);
    });
};
function setCheckedIndex(index) {
  checkedIndex.value = index;
}
const getTreeList = () => {
  getVedioTree().then((res) => {
    treeList.value = res.data;
    console.log('res', res);
  });
};
const closeModal = () => {
  emit('closeModal');
};
const handleNodeClick = async (item, node) => {
  console.log('item', node.childNodes, node);
  if (node.childNodes && node.childNodes.length > 0) {
    // 如果有子节点，不执行任何操作或返回，不触发方法逻辑
    return;
  }
  if(item.type == 'video'){
    const host = window.location.host.includes('localhost') ? '/dev-api' : '/stage-api';
  axios
    .post('/stage-api/storehouse/videoPlatform/uvp-micro-service/mediatranscode/api/v1/play', {
      code: item.id,
      redirect: false
    })
    .then((res) => {
      if (res.data.location) {
        videoSrc.value = res.data.location;
        loadAndPlayVideo(videoSrc.value);
      }
      console.log('res.location-------------', res.data.location);
    })
    .catch((error) => {
      console.error('Error fetching video:', error);
    });
  }
  
};
// const handleNodeClick = async (item, node) => {
//   console.log('item', node.childNodes, node);
//   if (node.childNodes && node.childNodes.length > 0) {
//     // 如果有子节点，不执行任何操作或返回，不触发方法逻辑
//     return;
//   }

//   const params = {
//     channelNos: item.nvrChannel || '',
//     code: '',
//     id: item.nvrCode || '',
//     psUrl: ''
//   };
//   try {
//     const response = await realTimeStream(params);
//     // if (response.code != 0 || !response.data) {
//     //   await ElMessageBox.confirm('视频流播放预请求失败！');
//     //   return;
//     // }
//     console.log('response.data', response.data);
//     const { resultData } = response.data;
//     const tempObj = {
//       ...resultData,
//       ...item,
//       guid: CsncUtils.guid(),
//       ...videoObj.value
//     };

//     // 假设你有一些逻辑来检查是否已经获取了当前设备的视频
//     // const arr = treeData.value.filter(itm => `${itm.id}${itm.channelNos}` === `${tempObj.id}${tempObj.channelNos}`);
//     // if (arr.length) {
//     //   ElMessage.error('当前设备视频已获取!');
//     //   return;
//     // }

//     currentDeviceInfo.value = tempObj;
//   } catch (error) {
//     console.error('获取实时视频流失败:', error);
//     ElMessage.error('获取实时视频流失败！');
//   }
// };
// 同步当前视频流列表数据，用于左侧树点击时判断当前设备视频是否已获取
const getVideoList = (list) => {
  console.log('videoList.value', list);
  videoList.value = list;
};
</script>

<style lang="scss" scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  width: 1700px;
  background: rgba(5, 30, 67, 0.95);
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(5, 30, 67, 0.8);
    width: 100%;
    height: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    .modal-header-left {
      display: flex;
      align-items: center;
      margin-left: 8px;
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
      span {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
      }
    }
    .close-button {
      cursor: pointer;
      font-size: 20px;
    }
    img {
      width: 16px;
      height: 16px;
      margin-right: 20px;
      &:hover {
        cursor: pointer;
        opacity: 0.85;
      }
    }
  }
  .m-c-box {
    width: 100%;
    height: 75vh;
    border-radius: 4px;
    .e-box {
      display: flex;
      .video-box {
        width: 70%;
        padding-bottom: 20px;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        video {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .eq-left-top {
        width: 360px;
        .eq-left-top-title {
          width: 100%;
          height: 33px;
          background: rgba(10, 39, 82, 1);
          display: flex;
          align-items: center;
          color: #fff;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          img {
            width: 20px;
            height: 21px;
            margin: 0 5px 0 10px;
          }
        }
        .eq-left-top-content {
          padding: 10px 0;
          background: rgba(5, 30, 67, 0.6);
          .eq-left-top-c-seach {
            width: 340px;
            height: 38px;
            background-image: url('../../../assets/images/home-page/seach-bg.png');
            background-size: 100% 100%;
            margin: 0 auto;
            line-height: 38px;
            input {
              background: transparent;
              width: 60%;
              height: 25px;
              margin-left: 15px;
              color: #fff;
              outline: none;
              border: none;
            }
          }
          .eq-left-top-c-tree {
            width: 90%;
            margin: 10px auto 0 auto;
          }
        }
      }
    }
  }
}
:deep(.el-tree) {
  background-color: transparent !important;
  height: 38vh;
  overflow-y: scroll;
  .el-tree-node__label {
    font-size: 12px;
    font-family: PingFangSC, PingFang SC;
    color: #ffffff;
  }
}
:deep(.el-tree-node__content:hover) {
  background-color: transparent !important;
  background-image: url('../../../assets/images/home-page/tree-bg.png') !important;
  background-size: 100% 100% !important;
}
:deep(.el-tree-node__expand-icon) {
  color: #ffffff !important;
}

:deep(.el-tree-node:focus > .el-tree-node__content) {
  /* background-color: #214a37 !important; */
  background-color: transparent !important;
  // height: 30px !important;
  background-image: url('../../../assets/images/home-page/tree-bg.png') !important;
  background-size: 100% 100% !important;
}
</style>
